<template>

  <div class="absolute_wrap" style="background: #ebebeb;top: 1.15rem">
    <mt-loadmore :autoFill='false' :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="allLoaded">
      <ul  >
        <li v-for='(item,index) in showData' class="wrap">
          <div class="personal flex_wrap">
            <div class="touxiang">
              <img :src="item.studentPhoto" />
            </div>
            <div class="useinfo">
              <div class="usename">{{item.studentName}}</div>
              <div class="time">{{new Date(item.createTime).Format('yyyy-MM-dd hh:mm')}}</div>
            </div>
          </div>
          <div class="flex_wrap" style="margin-bottom:0.15rem;justify-content:space-between;">
            <div class="flex_wrap">
              <div>作业表现</div>
              <div class="start_wrap" style="justify-content: flex-start;">
                <div class="start1" v-for="i in item.taskLevel"></div>
              </div>
            </div>
            <div class="flex_wrap">
              <div>行为表现</div>
              <div class="start_wrap" style="justify-content: flex-start">
                <div class="start1" v-for="i in item.behaviorLevel"></div>
              </div>
            </div>
          </div>

          <div class="img_wrap">
            <img v-for='(img,index) in item.filePathList' v-if="img.fileType==1" @click.stop="$api.showImgDetail(img.filePath)" :src=$api.formatterImg(img.filePath) />
          </div>
          <div class="audio_wrap">
            <audio v-for='(audio,index) in item.filePathList' v-if="audio.fileType==2" :src=audio.filePath></audio>
          </div>
          <div class="dianping" v-html="item.bodyComment"></div>
          <div class="flex_wrap" style="margin-bottom:0.2rem;">
            <div v-for="impress in item.allImpression" v-if="impress.isCheck" class="impress">
              {{impress.text}}
            </div>
          </div>
          <div class="dongtai_action">
            <!-- :class="{ active: item.zan,}" -->
            <div class="pinglun">
              <i></i>
              <div @click="comment(item.taskCommentId)">评论</div>
            </div>
            <div class="share">
              <i></i>
              <div @click="$api.share(item)">分享</div>
            </div>
          </div>
          <div class="pinglun_list_wrap" :class="{active:item.tsTaskCommentInfoList.length}">
            <ul class="pinglun_list">
              <li v-for='(row,i) in item.tsTaskCommentInfoList'>
                <div class="pinglun_wrap" @click="huifu(row.taskCommentInfoId,row.pid,row.pidPath,i,row.userName)">
                  <div>
                    <span class="name">{{row.userName}}</span>
                    <span>:</span>
                    <span class="neirong" v-html="row.bodyComment"></span>
                  </div>
                  <a class="delete" v-if="canDelete(row.userId)" @click.stop="deleteThings(2,row.taskCommentInfoId)">删除</a>
                </div>
                <div v-for="(row1,i) in row.voTsTaskCommentReplyInfoList" @click="huifu(row1.taskCommentReplyInfoId,row1.pid,row1.pidPath,i,row1.userName)"
                  class="huifu_wrap">
                  <div>
                    <span class="name">{{row1.userName}}</span>
                    <span class="huifu" v-if="row1.userNameRep">回复</span>
                    <span class="name">{{row1.userNameRep}}</span>
                    <span>:</span>
                    <span class="neirong" v-html="row1.bodyComment"></span>
                  </div>
                  <a class="delete" v-if="canDelete(row1.userId)" @click.stop="deleteThings(3,row1.taskCommentReplyInfoId)">删除</a>
                </div>


              </li>
            </ul>
          </div>
        </li>
      </ul>
    </mt-loadmore>
    <mt-popup v-model="showcomment" style="width:100%;" position="bottom">
      <div class="comment_wrap">
        <input v-model="messagerValue" maxlength="200" :placeholder="inputPlaceholder" v-focus="showcomment" />
        <mt-button size="small" type="primary" :disabled='!messagerValue.trim()' @click="messagerConfirm()">确定</mt-button>
      </div>
    </mt-popup>
  </div>

</template>
<script>
    import {
        MessageBox
    } from 'mint-ui'
    export default {
        name: "footShow",
        data() {
            return {
                useInfo: {},
                inputPlaceholder: '',
                showcomment: false,
                messagerValue: '',
                pageSize: 10,
                pageNum: 1,
                studentId: '',
                allLoaded: false,
                showData: [],
            };
        },
        methods: {
            messagerConfirm() {
                this.showcomment = false;
                this.messagerCallback(this.$api.utf16toEntities(this.messagerValue));
                this.messagerValue = '';
            },
            clickZan: function(index) {
                var j = this.ifZan(this.showData[index].tsDynamicUserList);
                var array = this.showData[index].tsDynamicUserList
                if (j) {
                    array.splice(j - 1, 1);
                } else {
                    array.push({
                        userId: this.useInfo.userId,
                        userName: this.useInfo.userName,
                    })
                }
            },
            comment(id) { //评论
                var params = {
                    userId: this.useInfo.userId,
                    taskCommentId: id,
                    // pid: pid,
                    // pidPath: pidPath + ',' + this.useInfo.userId,
                };
                this.inputPlaceholder = ''
                this.showPinglun((value) => {

                    params.bodyComment = value; //参数评论内容
                    var url = 'taskCommentInfo/add'
                    this.$api.post(url, params, (data) => {
                        this.getList();
                    })
                })
            },
            huifu(id, pid, pidPath, index, userName) { //回复
                var params = {
                    taskCommentInfoId: id,
                    userId: this.useInfo.userId,
                    pid: pid,
                    pidPath: pidPath + ',' + this.useInfo.userId,
                };
                if (userName) {
                    this.inputPlaceholder = '回复' + userName + ':'
                } else {
                    this.inputPlaceholder = ''
                }
                this.showPinglun((value) => {
                    params.bodyComment = value; //参数评论内容
                    var url = 'taskCommentReplyInfo/add'
                    this.$api.post(url, params, (data) => {
                        this.getList();
                    })
                })
            },
            showPinglun(callback) {
                this.showcomment = true;
                this.messagerCallback = callback
            },
            ifZan(list) {
                var state = false
                list.forEach((element, index) => {
                    if (element.userId == this.useInfo.userId) {
                        state = index + 1;
                    }
                });
                return state;
            },
            canDelete(useID) {
                if (useID == this.useInfo.userId) {
                    return true;
                } else {
                    return false;
                }
            },
            deleteThings(type, id) { //删除作业,评论,回复
                MessageBox.confirm('确定要删除?').then(o => {
                    switch (type) {
                        case 1: //删除动态 ,目前没有这个
                            var params = {
                                taskCommentId: id,
                            };
                            var url = 'taskComment/remove'
                            this.$api.post(url, params, (data) => {
                                this.getList();
                            })
                            break;
                        case 2: //删除评论
                            var params = {
                                taskCommentInfoId: id,
                            };
                            var url = 'taskCommentInfo/remove'
                            this.$api.post(url, params, (data) => {
                                this.getList();
                            })
                            break;
                        case 3: //删除回复
                            var params = {
                                taskCommentReplyId: id,
                            };
                            var url = 'taskCommentReplyInfo/remove'
                            this.$api.post(url, params, (data) => {
                                this.getList();
                            })
                            break;
                    }
                }).catch(e => {

                })
            },
            loadBottom() {
                this.pageNum++;
                this.getList('push');
            },
            getList(push) { //刷新页面数据
                var url = 'taskComment/selectPage'
                if (!push) {
                    this.pageNum = 1;
                }
                var params = {
                    pageNum: this.pageNum,
                    pageSize: this.pageSize,
                    schoolId: this.useInfo.schoolId,
                    classId: sessionStorage.getItem('classId')
                }
                if (this.studentId) {
                    params.studentId = this.studentId;

                }

                this.$api.post(url, params, (data) => {
                    if (push) {
                        data.info.list.forEach(element => {
                            this.showData.push(element);
                        })
                    } else {
                        this.showData = data.info.list;
                    }
                    if (data.info.total == this.showData.length) {
                        this.allLoaded = true;
                    }
                    this.$refs.allLoaded.onBottomLoaded();
                    this.showData = this.showData.map(element => {
                        element.allImpression = JSON.parse(element.allImpression);
                        return element;
                    })
                })

            },
            getUseInfo() {
                this.useInfo = JSON.parse(sessionStorage.getItem('useInfo'));
                console.log(JSON.parse(sessionStorage.getItem('useInfo')))
                this.useInfo.studentList.forEach(o => {
                    if (o.checked) {
                        this.studentId = o.studentId;
                    }
                })
            }
        },
        created() {
            this.getUseInfo();
            this.getList();
        }
    }
</script>
<style scoped>
    .wrap {
        list-style: none;
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        height: auto;
        text-align: left;
        flex-direction: column;
        padding: 0 0.4rem 0.2rem 0.4rem;
        font-size: 0.3rem;
        background: white;
        margin-bottom: 0.2rem;
    }
    
    .text {
        font-size: 0.4rem;
        width: 100%;
        color: #161616;
        margin-bottom: 0.18rem;
    }
    
    .time {
        width: auto;
        height: 0.6rem;
        line-height: 0.35rem;
        font-size: 0.3rem;
        color: #a6a6a6;
    }
    
    .delete {
        color: #0489ff;
        margin-left: 0.25rem;
    }
    
    .audio_wrap {
        width: 100%;
        height: auto;
    }
    
    .audio_wrap audio {
        width: 7rem;
    }
    
    .dongtai_action {
        display: flex;
        justify-content: space-between;
        width: 100%;
        height: 0.9rem;
        line-height: 0.9rem;
        font-size: 0.4rem;
        color: #5e5e5e;
        border-top: 1px solid #ebebeb;
    }
    
    .dongtai_action i {
        margin-top: 0.14rem;
        margin-right: 0.2rem;
    }
    
    .zan {
        display: flex;
        width: 2.2rem;
        height: 100%;
        justify-content: center;
    }
    
    .zan.active div {
        color: #0489ff;
    }
    
    .zan.active i {
        background-image: url('../../static/images/dongtai/3@2x.png');
    }
    
    .zan i {
        display: block;
        width: 0.6rem;
        height: 0.6rem;
        background-image: url('../../static/images/dongtai/5@2x.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    
    .pinglun {
        width: 4rem;
        display: flex;
        height: 100%;
        justify-content: center;
    }
    
    .pinglun i {
        display: block;
        width: 0.6rem;
        height: 0.6rem;
        background-image: url('../../static/images/dongtai/4@2x.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    
    .share {
        width: 3rem;
        display: flex;
        height: 100%;
        justify-content: center;
    }
    
    .share i {
        display: block;
        width: 0.6rem;
        height: 0.6rem;
        background-image: url('../../static/images/dongtai/1@2x.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    
    .dongtai_zan {
        display: none;
        border-top: 1px solid #ebebeb;
        width: 100%;
        height: 0.9rem;
        line-height: 0.9rem;
    }
    
    .dongtai_zan.active {
        display: flex;
    }
    
    .dongtai_zan i {
        display: block;
        width: 0.45rem;
        height: 0.45rem;
        margin-top: 0.18rem;
        margin-right: 0.2rem;
        background-image: url('../../static/images/dongtai/7@2x.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    
    .dongtai_zan .name {
        margin-left: 0.1rem;
    }
    
    .pinglun_list_wrap {
        border-top: 1px solid #ebebeb;
        width: 100%;
    }
    
    .huifu_wrap {
        padding-left: 0.6rem;
    }
    
    .pinglun_list .delete {
        color: #9f9f9f;
    }
    
    .name {
        color: #404040;
    }
    
    .flex_wrap {
        display: flex;
    }
    
    .score {
        color: red;
        text-align: center;
        font-size: 0.4rem;
    }
    
    .impress {
        margin-right: 0.1rem;
        color: #ce6600;
    }
</style>